@extends('admin.common.base-master')

@section('html-head')
    <link href="{{url('css/jquery.form.css')}}" type="text/css" rel="stylesheet" />
    <script src="{{url('/js/lib/jquery.form.js')}}"></script>

    <style>
        .btn_add_classify{
            background: #31bcd3;margin-left:10px;height: 5px;width: 50px;color: white;text-align: center;padding:5px;border-radius:7px;box-shadow: 3px 2px 9px #888888;
        }
    </style>
@endsection

@section('html-body')
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="{{route('Admin.Home.goodsList')}}">商品管理</a>
            <em></em>
            <a href="#">商品轮播管理</a>
        </div>

        <div class="filter-box clearfix">
            <div class="fr">
                <a class="addBtn" href="javascript:;" onclick="upPop(0,'','','')">新增</a>
            </div>
        </div>

        <div class="table-box">
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>商品名称</th>
                    <th>轮播图片</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                @if(count($goodsBanners) > 0)
                    @foreach($goodsBanners as $key=>$goodsBanner)
                        <tr id="classify_{{$goodsBanner->id}}">
                            <td>{{$goodsBanner->id}}</td>
                            <td>
                                <span id="classify_name_{{$goodsBanner->id}}">{{$goodsBanner->goods_name}}</span>
                            </td>
                            <td class="account-td" style="width: 5%;">
                                <span class="photo" style="border-radius: 100%;display:initial">
                                    @if($goodsBanner->img_id != 0)
                                        <a target="_blank" href="{{$goodsBanner->img_url}}"class="openimg" data-key="{{$goodsBanner->img_id}}"><img src="{{$goodsBanner->img_url}}" alt="{{$goodsBanner->img_url}}"></a>
                                    @else
                                        <img src="{{url('images/default-avatar.png')}}" alt="">
                                    @endif
                                </span>
                            </td>
                            <td>{{$goodsBanner->sort}}</td>
                            <td>
                                <a href="javascript:void(0);" data-id="{{$goodsBanner->id}}" style="color: #ef1414;" onclick="upPop('{{$goodsBanner->id}}','{{$goodsBanner->img_id}}','{{$goodsBanner->img_url}}','{{$goodsBanner->sort}}')">编辑</a> |
                                <a href="javascript:void(0);" class="del" data-id="{{$goodsBanner->id}}" >删除</a>
                            </td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>
    </div>

    <div class="upPop-box">
        <div class="backdrop"></div>
        <div id="upPop" class="info-pop tixian">
            <input type="hidden" name="id" id="goodsImgId" value=""/>
            <a class="close" href="javascript:void(0);"></a>
            <h3>商品详情图设置</h3>

            <div class="fill-list">
                <label class="tit">详情图</label>
                <div class="demo" style="display: inline-block; padding: 0; margin: 0; *display: inline; *zoom:1;">
                    <input type = "hidden" name = "pic_img" id = "pic_img2" value = "" height="70px" >
                    <div id="showimg">
                    </div>
                    <div class="btn" style="background: #00A2D4">
                        <span id="inputImage">添加图片</span>
                        <input id="img_id" type="hidden" name="thumb_id" value="">
                    </div>
                    <div class="progress">
                        <span class="bar"></span><span class="percent">0%</span >
                    </div>
                    <p class="text" id="uploadthumb">上传详情图（图片格式为jpg、png、gif，规格：高限315px）</p>
                    <img id="img_show" style="width: 100px;padding-top: 3px;" src="" />

                </div>
            </div>

            <input type="hidden" name="id" id="goods_id" value="{{$goodsId}}"/>

            <div class="fill-list">
                <span class="fill-tit">排序:</span>
                <input class="fill-ipt" type="text" name="sort" id="sort" value="">
            </div>
            <div class="fill-list">
                <span class="fill-tit">&nbsp;</span>
                <input class="fill-submit" type="button" id="subThisForm" value="提交">
            </div>
        </div>
    </div>

    <script>
        function upPop(obj1,obj2,obj3,obj4){
            $('#goodsImgId').val(obj1);
            $('#img_id').val(obj2);
            $('#img_show').attr('src',obj3);
            $('#sort').val(obj4);
            $('.upPop-box').upPop();

        }

        $(function(){
            $(document).on('click', '#subThisForm', function () {
                var goodId = $('#goods_id').val();
                var imgId  = $('#img_id').val();
                var sort   = $('#sort').val();
                var id     = $('#goodsImgId').val();

                $.ajax({
                    url: '{{route("Api.Admin.goods.setGoodsBanner")}}',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        goods_id:goodId,
                        img_id:imgId,
                        sort:sort,
                        id:id
                    },
                    success: function (obj) {
                        if (obj.level == "success") {
                            noty({
                                text: obj.message, type: obj.level, timeout: 600,
                                callback: {
                                    afterClose:function(){
                                        window.location.reload();
                                    }
                                }
                            });
                        } else if (obj.level == "error") {
                            noty({text: obj.message, type: obj.level, timeout: 600});
                        }

                    },
                    error: function (obj) {
                        console.log(obj);
                    }
                });
            });

            $(document).on("click",".del",function(){
                var id = $(this).attr("data-id");
                noty({
                    text: '你确定要删除吗?',
                    buttons: [
                        {addClass: 'btn btn-primary', text: '确定', onClick: function($noty) {
                                $noty.close();
                                $.ajax({
                                    url:'{{route('Api.Admin.goods.delGoodsBanner')}}',
                                    type:'post',
                                    dataType:'json',
                                    data:{id:id},
                                    success:function(obj){
                                        if(obj.level == "success"){
                                            $("#classify_"+id).hide('slow');
                                        }else{
                                            noty({type:obj.level,text:obj.message,timeout:600});
                                        }
                                    },
                                    error:function(obj){
                                        console.log(obj);
                                    }

                                });
                            }
                        },
                        {addClass: 'btn btn-danger', text: '取消', onClick: function($noty) {
                                $noty.close();
                            }
                        }
                    ]
                });

            });

            //缩略图上传代码
            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'inputImage',
                url: '{{route("Api.File.upload")}}',

                chunk_size: '50mb',
                filters: {
                    max_file_size: '50mb',
                    mime_types: [
                        {title: "Image files", extensions: "jpg,gif,png"}
                    ],
                    prevent_duplicates: false
                },
                multi_selection: true,
                unique_names: true,

                flash_swf_url: '{{ url('vendor/plupload-2.1.2/Moxie.swf') }}',
                silverlight_xap_url: '{{ url('vendor/plupload-2.1.2/Moxie.xap') }}',

                file_data_name: 'photo',
                headers: {
                    Accept: 'application/json'
                },

                multipart_params: {},

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        up.start();
                    },

                    BeforeUpload: function (up, file) {
                        up.settings.multipart_params.file_name = file.name;
                    },

                    UploadProgress: function (up, file) {
                        $('#uploadthumb').html('<span style="color:red">上传中...</span>');
                    },

                    Error: function (up, err) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(err.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }

                        noty({
                            type: 'error',
                            text: err.message + ' ' + responseMessage,
                            timeout: 800
                        });
                    },

                    FileUploaded: function (up, file, info) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(info.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }
                        if (responseObj.level == "success") {
                            $('#img_id').val(responseObj.data.id);
                            var imgURL = responseObj.data.img_url + "?" + Math.random();
                            $('#img_show').attr("src",imgURL);
                            $('#uploadthumb').html('<span style="color:green">上传成功</span>');
                        } else {
                            noty({type: responseObj.level, text: responseObj.message, timeout: 800});
                            $('#uploadthumb').html('<span style="color: red">上传失败，请重新上传！</span>');
                        }

                    }
                }
            });
            uploader.init();
        });
    </script>
@endsection